<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- <form action="" method="post" enctype="application/x-www-form-urlencoded">
			
			<input type="submit" value=""/>
		</form> -->
		<button class="btn1">发送get的ajax</button>
		<button class="btn2">发送post的ajax</button>
		<button class="btn3">发送post的传文件的ajax</button>
		<script type="text/javascript">
			// ajax 封装 ；
			// get请求
			document.querySelector(".btn1").onclick = function(){
				ajax({
					url:"get.php",
					method:"get",
					async:true,
					dataType:"json",
					data:{
						name:"张三",
						age:20
					},
					success:function(res){
						// 用来接收ajax返还的结果
						console.log("get成功了",res);
					}
				})
				
				
			}
			
			// post请求
			
			document.querySelector(".btn2").onclick = function(){
				ajax({
					url:"post.php",
					method:"POST",
					async:true,
					dataType:"json",
					data:{
						name:"李四",
						age:21
					},
					success:function(data){
						console.log("post成功了",data);
					}
					
				})
				
				
			}
			
			
			
			
			
			
			function ajax(options){
				// 1.创建ajax对象
					let xhr;
					if(window.XMLHttpRequest){
						xhr = new XMLHttpRequest();
					}else{
						xhr = new ActiveXObject();
					}
					
					// 给默认参数；
					let {url="",method="get",async=true,data={},success=function(){},dataType="text"} = options;
					
					// 如果是get参数 那么 需要获取data里的数据 拼接在url上
					// console.log(data);
					if(method.toLowerCase()=="get"){
						url = url+"?"+o2s(data);
					}
					
					
					// 第二步；
					xhr.open(method,url,async);
					//post请求 设置头部
					if(method.toLowerCase() =="post"){
						xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")
					}
					xhr.onload = function(){
						// console.log(xhr.responseText);
						if(dataType=="text"){
							success(xhr.responseText);
						}else{
							success(JSON.parse( xhr.responseText));
						}
						
					}
					if(method.toLowerCase() =="post"){
						let sendData = o2s(data);
						xhr.send(sendData);
					}else{
						xhr.send();
					}
					
					
			}
			
			
			// obj = {name:"张三",age:20} ----->name=张三&age=20;
			var obj ={name:"张三",age:20,height:"178cm"};
			
			// let o2s = function(obj){
			// 	let keys = Object.keys(obj);
			// 	// name = 张三;
			// 	var arr = keys.map(key=>key+"="+obj[key]);
				
			// 	// console.log(arr);  // [name=张三,age=20];
			// 	var str = arr.join("&");
			// 	// console.log(str);
			// 	return str;
			// }
			
			let o2s = obj=>Object.keys(obj).map(key=>key+"="+obj[key]).join("&");
			
			
		// console.log(o2s(obj))
			
			
			
			
		</script>
	</body>
</html>
